<template>
  <bs-drawer v-model="visible" :title="title" size="60%">
    <div class="dialog-content">
      <!--规则名称输入-->
      <el-form :model="formData">
        <el-form-item label="告警规则名称" style="width: 50%;">
          <el-input v-model="formData.name" placeholder="请输入告警规则名称"></el-input>
        </el-form-item>
      </el-form>
      <!--规则配置Tab分组-->
      <el-tabs v-model="tabActive">
        <el-tab-pane label="匹配规则" name="1">
          <Rules :conditions="conditions" />
        </el-tab-pane>
        <el-tab-pane label="事件分组" name="2">
          <EvtGroup :config="groupRules" />
        </el-tab-pane>
        <el-tab-pane label="通知对象" name="3">
          <NoticeObj />
        </el-tab-pane>
        <el-tab-pane label="重复/升级/恢复策略" name="4">
          <Policy />
        </el-tab-pane>
        <el-tab-pane label="行动集成" name="5">
          <Active />
        </el-tab-pane>
      </el-tabs>
    </div>
  </bs-drawer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Rules from './component/Rules.vue'
import EvtGroup from './component/EvtGroup.vue'
import NoticeObj from './component/NoticeObj.vue'
import Policy from './component/Policy.vue'
import Active from './component/Active.vue'

const title = '告警规则'
const visible = ref()
const info = ref()
const formData = ref<Record<string, any>>({
  name: ''
})
const conditions = ref<any[]>([])
const groupRules = ref<any>({
  groupingFields: []
})
const tabActive = ref('1')
const open = (item: any) => {
  visible.value = true
  info.value = item
}

defineExpose({
  open
})

</script>
<style lang="scss" scoped>

</style>